<template>
	<view>

		<view class="uni-flex uni-row"
			style="-webkit-justify-content: center;justify-content: center;margin-top: 10px;">
			<image class="image" :src="product.image" />
		</view>



		<view class="uni-flex uni-row" style="justify-content: center;">
			<view class="" style="font-size: 20px;margin-top: 10px;;">{{product.brand + "&nbsp;&nbsp;"}}</view>
			<view class="" style="font-size: 20px;margin-top: 10px;">{{product.name}}</view>
		</view>


		<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
			<!-- <view class="" style="    font-size: 16px;margin-top: 10px;color: rgb(169 161 161);">{{product.brand}}</view> -->
			<view class="" style="    font-size: 16px;margin-top: 10px;color: rgb(169 161 161);">{{product.spec}}</view>
		</view>


		<view class="uni-flex uni-row " style="justify-content: center; margin-top: 10px;">
			<view>
				<view class="example-body" style="width: 60px;background-color: rgb(216 214 214);">
					<uni-grid :column="1" :show-border="false" :square="false">
						<uni-grid-item>
							<view class="grid-item-box" style="line-height: 10px;">

								<text class="" style="font-size: 10px; margin-top: 5px;">累计</text>
								<text class="" style="font-size: 10px; margin-top: 5px;">库存</text>
								<view class="grid-dot" style="right: -20px; ">
									<uni-badge class="uni-badge-left-margin" :text="product.number" type="warning"
										style="font-size: 14px;" />
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>


			</view>

		</view>


		<view class="uni-flex uni-row " style="justify-content: center;margin-top: 30rpx;">
			<view class="example-body" style="width: 100%;margin: 10px;">
				<view style="color: rgb(169, 161, 161);margin: 10px;width: 100%;text-align: center;">该商品在以下货柜中存在</view>
				<view class="" style="margin: 10px;display: contents;">
					<view class="tag-view" v-for="cabinet in product.list">
						<uni-tag :inverted="true" :circle="true" :text="cabinet.name" type="primary"
							style="min-width: 70px; padding: 0 10px; font-size: 10px;" />
					</view>

				</view>

			</view>
		</view>
		<view class="uni-flex uni-row "
			style="justify-content: center;margin-top: 30rpx;margin-left: 10px;margin-right: 10px;">
			<view class="example-body" style="display: block;width: 100%;">
				<view style="margin: 10px;">申请热度</view>
				<view style="margin: 10px;">当月申领：{{product.applyNumber}}</view>
				<view style="margin: 10px;">累计申领：{{product.count}}</view>
			</view>
		</view>





	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				product: [],
				userEntity: this.StorageCache('user')
			}
		},
		onLoad(options) {

			this.checkLogin()


			if (options.id) {
				uni.request({
					url: this.url+'AppProductDetails',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						sid: options.id
					},
					success: (res) => {

						if (res.statusCode == 200) {

							this.product = res.data;


						}
					},
					complete: (res) => {
				
					}
				});
			} else {

				setTimeout(function() {
					uni.switchTab({
						url: '/pages/cupboard/index'
					})
				}, 1000);


			}
		}
	}
</script>

<style>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.tag-view {
		margin: 10rpx;
		width: 80%;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	.image {
		width: 200px;
		height: 200px;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: -10px;
		right: -17px;
	}
	/deep/ .uni-tag-text {
		font-size: 12px;;
	}
</style>
